<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱奇艺</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 0 auto;
            background-color: #111214;
            width: 1415px;
            height: 512px;
        }
        .guide {
            display: flex;
            list-style: none;
            margin-top: 20px; 
        }
        .movie-list {
            display: flex;
            justify-content: space-around;
        }
        img {
            width: 216px;
            height: 290px;
            border-radius: 10px;
        }
        div p {
            font-size: 16px;
            color: #d5d5d5;
        }
        div button {
            width: 216px;
            height: 55px;
            border-radius: 10px;
            background-color: #1f2022;
            line-height: 1px;
            
        }
        div button h4 {
            font-size: 13px;
            color: #dfdfdf;
            text-align: center;
            
        }
        div button p {
            font-size: 12px;
            color: #a6a6a7;
            text-align: center;
        }
        div div p {
            position: absolute;
            top: 0;
            right: 0;
            padding: 0;
            margin: 0;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <div class="guide">
            <h3 style="font-size: 16px;color: #dfdfdf;">即将上线</h3>
            <h3 style="font-size: 12px;color: #a6a6a7;">更多新片></p>
        </div>
        <!-- 电影列表 -->
        <ul class="movie-list">
            <li>
                <!-- 图片 -->
                <div>
                    <img src="./images/黑暗森林.webp">
                </div>
                <!-- 电影名称 -->
                <p>黑暗森林</p>
                <!-- 预约按钮 -->
                <button>
                    <h4>预约</h4>
                    <p>32.7万人已预约</p>
                </button>
            </li>
            <li>
                <!-- 图片 -->
                <div>
                    <img src="./images/狙击精英.webp">
                </div>
                <!-- 电影名称 -->
                <p>狙击精英之纳米危机</p>
                <!-- 预约按钮 -->
                <button>
                    <h4>预约</h4>
                    <p>32.7万人已预约</p>
                </button>
            </li>
            <li>
                <!-- 图片 -->
                <div>
                    <img src="./images/雾隐藏棺.webp">
                    <p>VIP</p>
                </div>
                <!-- 电影名称 -->
                <p>棺中诡事之雾隐藏棺</p>
                <!-- 预约按钮 -->
                <button>
                    <h4>预约</h4>
                    <p>32.7万人已预约</p>
                </button>
            </li>
            <li>
                <!-- 图片 -->
                <div>
                    <img src="./images/功夫熊猫.webp">
                </div>
                <!-- 电影名称 -->
                <p>功夫熊猫4</p>
                <!-- 预约按钮 -->
                <button>
                    <h4>预约</h4>
                    <p>32.7万人已预约</p>
                </button>
            </li>
            <li>
                <!-- 图片 -->
                <div>
                    <img src="./images/我才不要和你做朋友呢.webp">
                </div>
                <!-- 电影名称 -->
                <p>我才不要和你做朋友呢</p>
                <!-- 预约按钮 -->
                <button>
                    <h4>预约</h4>
                    <p>32.7万人已预约</p>
                </button>
            </li>
            <li>
                <!-- 图片 -->
                <div>
                    <img src="./images/扫黑.webp">
                </div>
                <!-- 电影名称 -->
                <p>扫黑·决不放弃</p>
                <!-- 预约按钮 -->
                <button>
                    <h4>预约</h4>
                    <p>32.7万人已预约</p>
                </button>
            </li>
        </ul>
    </div>
</body>

</html>